<template>
 <div>
     <h1>Vue 3 Hooks (组合式函数) 详解</h1>
     <h2> {{ count }}</h2>
     <button @click="add"> 增加1 </button>
     <hr>
     <div>
         <img v-for=" (img,index) in imgList" :src="img" :key="index">
         <button @click="addImg"> 加一个照片 </button>
     </div>
     </div>
</template>

<script lang="ts" setup>
/**
 * Vue 3 Hooks (组合式函数) 详解
 * 
 * 什么是 Hooks？
 * -------------
 * 在 Vue 3 中，Hooks 通常被称为"组合式函数"(Composables)，是一种利用 Vue 的组合式 API 
 * 来封装和复用有状态逻辑的函数。它们类似于 React 的 Hooks，但有 Vue 特有的实现方式。
 * 
 * 基本概念：
 * 1. 组合式函数是一种利用 Vue 组合式 API 来封装和复用有状态逻辑的函数
 * 2. 通常以 "use" 开头命名，例如 useCounter、useFetch
 * 3. 可以在多个组件之间共享逻辑，而不需要依赖复杂的模式
 * 
 * 为什么使用 Hooks？
 * ----------------
 * 1. 代码组织：相关逻辑可以组织在一起，而不是分散在不同的选项中
 * 2. 逻辑复用：可以在多个组件之间复用相同的逻辑
 * 3. 类型推断：更好的 TypeScript 支持和类型推断
 * 4. 按需引入：只导入需要的功能，减小打包体积
 * 
 * Hooks 的基本结构：
 * ----------------
 * export function useXxx() {
 *   // 1. 声明响应式状态
 *   const state = ref(initialValue)
 *   
 *   // 2. 定义操作状态的函数
 *   function update() {
 *     state.value = newValue
 *   }
 *   
 *   // 3. 可选：执行副作用（如设置监听器、定时器等）
 *   onMounted(() => {
 *     // 初始化逻辑
 *   })
 *   
 *   onUnmounted(() => {
 *     // 清理逻辑
 *   })
 *   
 *   // 4. 返回需要暴露的状态和方法
 *   return {
 *     state,
 *     update
 *   }
 * }
 * 
 * 常见的 Hooks 类型：
 * -----------------
 * 
 * 1. 状态管理 Hooks
 *    - 封装特定的状态逻辑，如计数器、表单状态等
 *    - 例如：useCounter、useForm、useToggle
 * 
 * 2. 副作用 Hooks
 *    - 处理副作用，如数据获取、订阅事件等
 *    - 例如：useFetch、useEventListener、useInterval
 * 
 * 3. 生命周期 Hooks
 *    - 在特定生命周期执行逻辑
 *    - 例如：useMount、useUnmount
 * 
 * 4. DOM 相关 Hooks
 *    - 处理 DOM 交互，如滚动、尺寸监听等
 *    - 例如：useScroll、useResize、useIntersectionObserver
 * 
 * 5. 浏览器 API Hooks
 *    - 封装浏览器 API，如 localStorage、地理位置等
 *    - 例如：useLocalStorage、useGeolocation
 * 
 * 实际例子（注释形式）：
 * -------------------
 * 
 * 1. useCounter - 计数器 Hook
 * 
 * // hooks/useCounter.ts
 * import { ref } from 'vue'
 * 
 * export function useCounter(initialValue = 0) {
 *   const count = ref(initialValue)
 *   
 *   function increment() {
 *     count.value++
 *   }
 *   
 *   function decrement() {
 *     count.value--
 *   }
 *   
 *   function reset() {
 *     count.value = initialValue
 *   }
 *   
 *   return {
 *     count,
 *     increment,
 *     decrement,
 *     reset
 *   }
 * }
 * 
 * 2. useFetch - 数据获取 Hook
 * 
 * // hooks/useFetch.ts
 * import { ref, watchEffect, toRefs } from 'vue'
 * 
 * export function useFetch(url) {
 *   const data = ref(null)
 *   const error = ref(null)
 *   const loading = ref(true)
 *   
 *   async function fetchData() {
 *     loading.value = true
 *     error.value = null
 *     
 *     try {
 *       const response = await fetch(url)
 *       data.value = await response.json()
 *     } catch (err) {
 *       error.value = err
 *     } finally {
 *       loading.value = false
 *     }
 *   }
 *   
 *   watchEffect(() => {
 *     fetchData()
 *   })
 *   
 *   return { data, error, loading, refetch: fetchData }
 * }
 * 
 * 3. useEventListener - 事件监听 Hook
 * 
 * // hooks/useEventListener.ts
 * import { onMounted, onUnmounted } from 'vue'
 * 
 * export function useEventListener(target, event, callback) {
 *   onMounted(() => {
 *     target.addEventListener(event, callback)
 *   })
 *   
 *   onUnmounted(() => {
 *     target.removeEventListener(event, callback)
 *   })
 * }
 * 
 * 使用 Hooks 的最佳实践：
 * ---------------------
 * 
 * 1. 命名规范
 *    - 使用 "use" 前缀命名 Hook 函数
 *    - 名称应该清晰表达其功能
 * 
 * 2. 输入输出
 *    - 接受明确的参数
 *    - 返回有意义的值（通常是对象，包含状态和方法）
 * 
 * 3. 响应式
 *    - 确保返回的状态是响应式的
 *    - 使用 ref、reactive、computed 等 API
 * 
 * 4. 副作用管理
 *    - 在适当的生命周期钩子中设置和清理副作用
 *    - 使用 watchEffect 或 watch 处理依赖变化
 * 
 * 5. 组合使用
 *    - Hooks 可以调用其他 Hooks
 *    - 将复杂逻辑分解为多个小型 Hooks
 * 
 * 6. 类型定义
 *    - 为 Hook 函数和返回值提供明确的 TypeScript 类型
 * 
 * 7. 测试
 *    - 编写单元测试确保 Hook 行为符合预期
 * 
 * 与 React Hooks 的区别：
 * ---------------------
 * 
 * 1. 调用时机
 *    - React: 只能在函数组件顶层调用，有严格的调用顺序
 *    - Vue: 可以在任何地方调用，没有顺序限制
 * 
 * 2. 响应式系统
 *    - React: 使用 useState 等 API 手动管理状态更新
 *    - Vue: 基于自动跟踪的响应式系统
 * 
 * 3. 依赖收集
 *    - React: 需要显式声明依赖数组
 *    - Vue: 自动收集依赖
 * 
 * 4. 生命周期
 *    - React: 使用 useEffect 统一处理副作用
 *    - Vue: 提供多个专用的生命周期钩子
 * 
 * 实际应用场景：
 * ------------
 * 
 * 1. 表单处理
 *    - useForm: 处理表单状态、验证、提交等
 * 
 * 2. 认证逻辑
 *    - useAuth: 处理用户登录、注销、权限检查等
 * 
 * 3. 主题切换
 *    - useTheme: 管理应用主题状态和切换
 * 
 * 4. 国际化
 *    - useI18n: 处理多语言翻译和切换
 * 
 * 5. 媒体查询
 *    - useMediaQuery: 响应式处理屏幕尺寸变化
 * 
 * 6. 无限滚动
 *    - useInfiniteScroll: 处理滚动加载更多数据
 * 
 * 7. 路由参数
 *    - useRouteParams: 获取和处理路由参数
 */
import useDog from '@/hooks/useDog';
import useSum from '@/hooks/useSum';

const { count, add } = useSum();
const { imgList, addImg } = useDog();
</script>

<style scoped>

</style>